<template>
  <div class="container parameterInfor flowCloumn h100">
    <div class="constentBttom flowWrap tab-switch h100">
      <div class="treeDiv class-tree">
        <edit-tree
          ref="tree"
          :treeSetting="treeSetting"
          :hideBtn="hideBtn"
          :haveRemark="false"
          @handleClickTree="handleClickTree"
          :filterNode="filterNode"
        />
      </div>
      <div class="draggingBtn">
        <widthResize></widthResize>
      </div>
      <div class="constentmain tableDiv detail-content">
        <div class="h100">
          <list-table-new v-bind="tableSetting" ref="klTable"></list-table-new>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryOrderAssetList } from "@/api/standardManagement/orderAsset.js";
import { classStandardTree } from "@/api/standardManagement/acountManagement.js";
export default {
  data() {
    return {
      treeSetting: {
        title: "设备分类",
        treeNodeId: null,
        treeNodeName: null,
        data: [],
        defaultProps: {
          children: "children",
          label: "name",
        },
        clickExpand: false,
      },
      hideBtn: true,
      tableSetting: {
        selectionShow: true,
        pageConfig: {
          pageCode: "orderAsset",
          userId: this.$store.getters.userInfo.namePy,
        },
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          queryData: {
            page: 1,
            pageSize: 15,
            publicStatus: 1,
          },
          searchArr: [
            // {
            //   type: "input",
            //   label: "编号",
            //   model: "code",
            // },
            {
              type: "deviceClassify",
              label: "设备类型名称",
              model: "typeName",
              idsStr: "typeId",
            },
            {
              type: "input",
              label: "缺陷关键字",
              model: "keys",
            },
            {
              type: "input",
              label: "故障原因",
              model: "errorCase",
            },
            {
              type: "input",
              label: "故障描述",
              model: "errorDesc",
            },
            {
              type: "input",
              label: "处理方式",
              model: "solution",
            },
            {
              type: "select",
              label: "类型",
              model: "creationMode",
              option: [
                {
                  value: "0",
                  label: "自动",
                },
                {
                  value: "1",
                  label: "手动",
                },
              ],
            },
            {
              type: "datetimerange",
              label: "创建时间",
              model: "createTime",
            },
          ],
        },
        //过滤器的值
        filterFormData: {},
        //过滤器的默认值
        defaultFilterData: {},
        userCustomData: [],
        actionList: [
          // {
          //   name: "设为公共标准",
          //   icon: "icon-sheweigonggongbiaozhun11",
          //   disabled: !this.$store.getters.isBtnAuth("setPublic"), //控制按钮的禁用
          //   content: "未授权功能", //禁用提示内容
          //   method: (row) => {
          //     this.toPublicStandard();
          //   },
          // },
          {
            name: "新建",
            icon: "el-icon-plus",
            disabled: !this.$store.getters.isBtnAuth("add"), //控制按钮的禁用
            content: "未授权功能", //禁用提示内容
            method: (row) => {
              this.goDetailPage(row, "orderAssetDetail", "add");
            },
          },
          // {
          //   name: "导入",
          //   icon: "icon-daoru",
          //   disabled: !this.$store.getters.isBtnAuth("import"), //控制按钮的禁用
          //   content: "未授权功能", //禁用提示内容
          //   method: (row) => {
          //     this.uploadFile();
          //   },
          // },
          // {
          //   name: "导出",
          //   icon: "icon-daochu",
          //   disabled: !this.$store.getters.isBtnAuth("export"), //控制按钮的禁用
          //   content: "未授权功能", //禁用提示内容
          //   method: (row) => {
          //     this.export();
          //   },
          // },
          // {
          //   name: "下载模板",
          //   icon: "icon-xiazai",
          //   disabled: !this.$store.getters.isBtnAuth("download"), //控制按钮的禁用
          //   content: "未授权功能", //禁用提示内容
          //   method: (row) => {
          //     this.download();
          //   },
          // },
        ],
        column: [
          // {
          //   label: "编号",
          //   prop: "code",
          //   sortable: "custom",
          // },
          {
            label: "设备类型名称",
            prop: "typeName",
            sortable: "custom",
          },
          {
            label: "缺陷关键字",
            prop: "keys",
            sortable: "custom",
          },
          {
            label: "故障原因",
            prop: "errorCase",
            sortable: "custom",
          },
          {
            label: "故障描述",
            prop: "errorDesc",
            sortable: "custom",
          },
          {
            label: "处理方式",
            prop: "solution",
            sortable: "custom",
          },
          {
            label: "类型",
            prop: "creationMode",
            sortable: "custom",
            formatter: (row) => {
              return row.status == 1 ? "手动" : "自动";
            },
          },
          // {
          //   label: "创建人",
          //   prop: "createByName",
          //   sortable: "custom",
          // },
          {
            label: "创建时间",
            prop: "createTime",
            sortable: "custom",
          },
        ],
        //表格方法
        tableMethods: {
          //点击行的方法
          rowClick: (row) => {
            this.goDetailPage(row, "orderAssetDetail", "edit");
          },
        },
      },
    };
  },
  methods: {
    // TODO.待替换成工单库的列表请求接口 获取表格数据
    getTableData(params, sortStr) {
      let queryData = Object.assign({}, params);
      this.searchData = params;
      // 排序条件
      if (sortStr.length > 0) {
        queryData.orders = sortStr;
      }
      // 处理时间参数，把时间数组拆分出两个字段（开始-结束时间）
      const { createTime: createTimeList, ...restParams } = queryData;
      if (createTimeList) {
        const [createTime, createEndTime] = createTimeList;
        queryData = { createTime, createEndTime, ...restParams };
      }
      // 时间排序特殊处理，sort字段控制排序 1倒序 0顺序
      let time = sortStr.find(i => i.column === 'createTime');
      if(time && time.column === "createTime") {
        queryData.sort = time.asc ? 0 : 1;
      }
      queryData.typeId = this.treeNodeId;
      queryOrderAssetList(queryData).then((res) => {
        this.$set(this.tableSetting, "tableData", res.data.list);
        this.$set(this.tableSetting, "totalNumber", res.data.total);
      });
    },
    updateData() {
      this.$refs.klTable.searchData();
    },
    // 跳转到详情页
    goDetailPage(row, router, type) {
      const { href } = this.$router.resolve({
        name: router,
        query: {
          id: row ? row.id : "",
        },
      });
      window.open(href, "_blank");
    },
    // 点击左栏树组件
    handleClickTree(node) {
      this.treeNodeId = node.id;
      this.treeNodeName = node.name;
      this.updateData();
    },
    // 筛选树
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //获取分类标准树数据
    getTreeData() {
      classStandardTree().then(
        (res) => {
          this.$set(this.treeSetting, "data", res.data);
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
  },
  created() {
    this.getTreeData();
    window.addEventListener("storage", this.updateData);
  },
  beforeDestroy() {
    /* 删除监听事件 */
    window.removeEventListener("storage", this.updateData);
  },
  mounted() {
    this.$refs.klTable.getTableConfig();
    this.updateData();
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  // background-color: white;
  // display: flex;
  .class-tree {
    height: 100%;
    //min-width: 200px;
    width:300px;
    border-right: 10px solid #f2f3f8;
  }
  .detail-content {
    height: 100%;
    width: calc(100% - 300px);
    //border-left: 10px solid #f2f3f8;
    padding: 20px;
    flex: 1;
    overflow: auto;
  }
}
.parameterInfor {
  .constentmain {
    margin-left: 15px;
  }
  /deep/.el-tabs__content {
    height: calc(100% - 50px);
  }
  /deep/.el-tab-pane {
    height: 100%;
  }
}
.flowCloumn {
  display: flex;
  flex-flow: column nowrap;
}
.flowWrap {
  display: flex;
  flex-flow: wrap nowrap;
}
.el-tabs--border-card {
  box-shadow: none;
}
</style>
